<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="/WEB-INF/html.tld" prefix="html"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<c:url var="url" value="/user/add" />
<c:url var="formActionType" value="ajax" />
<c:url var="formName" value="UserForm" />
<c:url var="modelName" value="user" />

<div class="window">
	<div class="window-holder">
	
	<div class="window-content">
		<div class="breadcrumb green">
				<a href="#" class="active">Add User</a>
				
			</div>
		<div id="window-content-holder">

		<form:form id="${formName}" modelAttribute="${modelName}" method="POST" action="${url}" name="${formName}">
			<html:table attributes="class='inputTable' border='0' width='100%'">
 			<tr>
				<td colspan="3" class="subSectionBottomBorder">										
					<h4><spring:message code="label.user.details"/></h4>
				</td>
				
			</tr>
			
			<tr>
			<html:td><label class="alpha-numeric required"><spring:message code='label.user.name'/></label></html:td>
			<html:td><label class="alpha-numeric required"><spring:message code='label.first.name'/></label></html:td>
			<html:td><label class="alpha-numeric required"><spring:message code='label.last.name'/></label></html:td>
			<html:td><label class="alpha-numeric required"><spring:message code='label.language.code'/></label></html:td>
				
				
			</tr>
			<tr>
				<html:td><form:input path="user.userName" name="user.userName" class="alpha-numeric required"></form:input></html:td>	
				<html:td><form:input path="user.firstName" name="user.firstName" class="alpha-numeric required"></form:input></html:td>
				<html:td><form:input path="user.lastName" name="user.lastName" class="alpha-numeric required"></form:input></html:td>
				<html:td><form:select path="user.languageCode" name="user.languageCode" items="${lovBean.list('LANG_CODE')}" css="alpha-numeric required" /></html:td>
				
				
			</tr>
			
			<tr>
				
				<html:td><label class="alpha-numeric required"><spring:message code='label.password'/></label></html:td>
				<html:td><label class="alpha-numeric required">Re-<spring:message code='label.password'/></label></html:td>
				<html:td><label class="alpha-numeric required"><spring:message code='label.question'/></label></html:td>
				<html:td><label class="alpha-numeric required"><spring:message code='label.answer'/></label></html:td>
				
				
			</tr>
			<tr>
				
				<html:td><form:password path="user.password" name="user.password" class="alpha-numeric required"></form:password></html:td>
				<html:td><form:password path="user.rePassword" name="rePassword" class="alpha-numeric required"></form:password></html:td>
				<html:td><form:input path="user.question" name="user.question" class="alpha-numeric required"></form:input></html:td>
				<html:td>&nbsp;</html:td>
				
				
			</tr>
			
			<tr>
				<html:td><label class="date required"><spring:message code='label.expiry.date'/></label></html:td>
				<html:td><label class="date required"><spring:message code='label.password.expires'/></label></html:td>
				<html:td><label class="alpha-numeric required"><spring:message code='label.user.status'/></label></html:td>
				
			
			</tr>
			<tr>
				
				<html:td><form:input path="user.expiryDate" name="user.expiryDate" class="date required"></form:input></html:td>
				<html:td><form:input path="user.passwordExpireDate" name="user.passwordExpireDate" class="date required"></form:input></html:td>
				<html:td><form:select path="user.userStatus" name="user.userStatus" items="${lovBean.list('USR-STTS')}" class="alpha-numeric required" style='width:100px;' />
				</html:td>
				<html:td>&nbsp;</html:td>
			</tr>
			
			<tr>
				<td colspan='4'><label class="alpha-numeric optional"><spring:message code='lable.roles'/></label></td>
				

			</tr>
			<tr>
				<td colspan='4' width="100%">
					<form:select path="roles" items="${lovBean.list('VND-ROLES')}"  style='width:100px;' />
				</td>
				
				
			</tr>
			<tr>
		<td colspan="4" class="subSectionBottomBorder">										
			<h4><spring:message code="label.current.address"/>&nbsp;</h4>
		</td>
	</tr>
	<tr>
		<td class="labelClass"><spring:message code="lable.suitno"/></td>
		<td class="labelClass labelMandatory"><spring:message code="lable.streetno"/></td>
		<td class="labelClass labelMandatory"><spring:message code="label.street.name"/></td>
		<td class="labelClass"><spring:message code="lable.mobile.phone"/></td>
		
	</tr>
	<tr>
		<td><form:input path="address.suitNo" maxlength="5" /></td>
		<td><form:input path="address.streetNo" maxlength="6" /></td>
		<td><form:input path="address.streetName"/></td>
		<td><form:input path="user.phone" maxlength="14" class="optional phone"/></td>
		
	</tr>
	<tr>
		<td class="labelClass labelMandatory"><spring:message code="label.city"/></td>
		<td class="labelClass labelMandatory"><spring:message code="label.province"/></td>
		<td class="labelClass labelMandatory"><spring:message code="label.postal.code"/></td>
		<td class="labelClass"><spring:message code="label.email"/></td>
		
	</tr>
	
   <tr>
		<td><form:input path="address.city" maxlength="30" /></td>
		<td>
			<form:input path="address.provinceCode"/>
					
		</td>
		<td align="left"><form:input path="address.postalCode" size="10" /></td>
		<td><form:input path="user.emailId" maxlength="30" class="optional email"/></td>
		
	</tr>
		
	</html:table>
 	<form:hidden path="user.userId"/>
	</form:form>
</div></div>
	<div class="window-footer-title">
		<div class="button-holder">
			<button type="button" id="addUser">Validate</button>
			<button type="button" id="validateUser">Submit</button>
		</div>
	</div>
</div>
</div>


<script type="text/javascript">
<!--
$(function () {
	 
	$("#addUser").on("click",submitForm);
	$("#validateUser").on("click",submitForm);
});


function submitForm()
{
	//preSubmit(document.${formName});//global presubmit function to remove masked value;
	
		jQuery.ajaxSettings.traditional = true;
		//$("#${formName}").validate();
		var formData = $("#${formName}").serializeObject();
		var params={url:"${url}",success:onSuccess,data:formData,type:"POST",dataType:"json"};
		doAjax(params);
	
		
}


function onSuccess(result)
{
	
	console.log(result);
	console.log(result.error);
	console.log(result.fieldError[0].field);
	//TODO:rendering of error fields should be common at one place for the every form.
	$( result.fieldError).each(function() {
		console.log(this.field);
		$('input[name="'+this.field+'"]').css( "border",'1px solid red' );
	});
	

}
</script>



